<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="${ctx}/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/weui.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/jquery-weui.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/icard.css?v=${cssVersion}">
    <link rel="stylesheet" href="${ctx}/static/font-awesome-4.7.0/css/font-awesome.css">

    <title>访客预约详情</title>

    <style>
        .weui-dialog.weui-dialog--visible{
            width: 90%;
            max-width: 500px;
        }

        .weui-media-box:before{
            display: none;
        }
        .weui-media-box:after{
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid #E5E5E5;
            color: #E5E5E5;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            left: 15px;
        }

        .weui-uploader__input-box:before{
            display: none;
        }
        .weui-uploader__input-box:after{
            display: none;
        }
       .weui-label{
            font-weight: 400;
           margin-bottom: 0px;
        }

        .toolbar-inner h1{
            margin-top: 0px;
            margin-bottom: 0px;
            margin-block-end: 0px;
            margin-block-start: 0px;
        }

        .weui-check_label {
            font-weight:400;
        }

        .toolbar .picker-button {
            color: #2e6da4 ;
        }

        .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
            color: #2e6da4;
        }

        .picker-calendar-day.picker-calendar-day-selected span {
            background: #2e6da4;
        }

        i.icon.icon-next {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%232e6da4'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        }
        i.icon.icon-prev {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%232e6da4'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        }
    </style>
</head>
<body>

<form id="reservationForm" onsubmit="return false;" method="post">
    <div class = "block-title" style="display: table; width: 100%;  text-align: left;height: 40px;">
        <div  style="color:#999999;font-size: 16px;display: table-cell; vertical-align: middle;padding-left: 15px;">
            基本信息
        </div>
    </div>
    <div class="weui-cells weui-cells_form " style="margin-top: 0px;">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">预约单号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="reservationno" name="reservationno" type="text" readonly="readonly" value="${reservationPrimary.reservationno!?html}">
            </div>
            <div id='qrCode' style="width:40px;height: 40px;background: no-repeat center center;background-size: cover;display: table-cell; text-align: right; padding-right: 20px; vertical-align: middle;">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">接待部门</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="deptname" name="deptname" type="text" readonly="readonly" value="${reservationPrimary.deptname!?html}">
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">接待人</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="employeenameReception" name="employeenameReception" type="text" readonly="readonly" value="${reservationPrimary.employeenameReception!?html}">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="employeenoPhone" name="employeenoPhone" readonly="readonly" type="number" value="${reservationPrimary.employeenoPhone!?html}">
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="forecastVisitingTime" class="weui-label">来访日期</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="forecastVisitingTime" id="forecastVisitingTime" value="${reservationPrimary.forecastVisitingTime?string('yyyy-MM-dd')}" readonly="readonly" placeholder="年-月-日">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="forecastDepartureTime" class="weui-label">出园日期</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="forecastDepartureTime" id="forecastDepartureTime" value="${reservationPrimary.forecastDepartureTime?string('yyyy-MM-dd')}" readonly="readonly" placeholder="年-月-日">
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">受访区域</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="districtName" id="districtName" value="${reservationPrimary.districtName!?html}" readonly="readonly" >
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">访客单位</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="visitorCompany" name="visitorCompany" type="text" readonly="readonly" value="${reservationPrimary.visitorCompany!?html}" >
            </div>
        </div>

        <div class="weui-cell" style="align-items: start">
            <div class="weui-cell__hd"><label class="weui-label">来访事宜</label></div>
            <div class="weui-cell__bd">
                <textarea name="visitingMatters" id="visitingMatters" class="weui-textarea"  readonly="readonly" rows="3">${reservationPrimary.visitingMatters!?html}</textarea>
            </div>
        </div>

    </div>

    <div class = "block-title" style="display: table; width: 100%;  text-align: left;height: 40px;">
        <div  style="color:#999999;font-size: 16px;display: table-cell; vertical-align: middle;padding-left: 15px;">
            访客信息
        </div>
    </div>
   <div id="visitorContentDiv" style="min-height: 60px;padding-bottom:20px;background-color: #EAEAEA;">
       <#if reservationPrimary?? && reservationPrimary.reservationList??><#list reservationPrimary.reservationList as record>
           <div class="weui-media-box weui-media-box_text visitorPanel" style="background-color: #FFFFFF;">

               <div style="display: table; width: 100%;  text-align: left;">
                   <h4 class="weui-media-box__title" style="display: table-cell;font-weight: 400;font-size: 17px;color: #2e6da4">${record.visitor!?html}</h4>
               </div>

               <div style="display: table; width: 100%;  text-align: left;">
                   <div style="margin-top: 10px;height: 20px;" >
                       <p class="weui-media-box__desc" style="display:inline-block;width: 60px;">身份证号:</p>
                       <p class="weui-media-box__desc" style="display:inline-block;">${record.idcardno!?html}</p>
                   </div>
                   <div style="margin-top: 5px;height: 20px;">
                       <p class="weui-media-box__desc" style="display:inline-block;width: 60px;">职务:</p>
                       <p class="weui-media-box__desc" style="display:inline-block;">${record.visitorPosition!?html}</p>
                   </div>
                   <div style="margin-top: 5px;height: 20px;">
                       <p class="weui-media-box__desc" style="display:inline-block;width: 60px;">手机号:</p>
                       <p class="weui-media-box__desc" style="display:inline-block;">${record.phone!?html}</p>
                   </div>
                   <div style="margin-top: 5px;height: 20px;">
                       <p class="weui-media-box__desc" style="display:inline-block;width: 60px;">携带物品:</p>
                       <p class="weui-media-box__desc" style="display:inline-block;">${record.carryItems!?html}</p>
                   </div>
                   <div style="display: table-cell; text-align: right; padding-right: 5px; vertical-align: middle;">
                       <div id="photoImg" onclick="showVisitorPhoto(this);" class="weui-uploader__input-box weui-uploader__file" style="border:1px solid #D9D9D9;width:80px;height: 80px;float: right;margin-left: 9px;margin-right: 0px;">
                        <img style="width: 80px;height: 80px;" src="data:image/jpeg;base64,${record.photoBase64!?html}" alt="">
                       </div>
                   </div>
               </div>

           </div>
        </#list>
        <#else>
            <div id="noVisitorMsg" class="weui-cell" style="background-color: #FFFFFF;">
            暂无访客信息
            </div>
        </#if>

    </div>

</form>


<script src="${ctx}/static/jqweui/js/jquery-2.1.4.js"></script>
<script src="${ctx}/static/jqweui/js/jquery-weui.js?v=1.2"></script>
<script src="${ctx}/static/handlerbars.min.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap-suggest.min.js"></script>
<script src="${ctx}/static/jquery.qrcode.min.js"></script>
<script type="text/javascript">


    $(function () {
        $("#qrCode").qrcode({
            render: "canvas", //也可以替换为table
            width: 40,
            height: 40,
            text: $("#reservationno").val()
        });
    });


    $("#qrCode").on("click",function(){
        $.modal({
            title: "二维码",
            text: "<div id='qrCodeDialog' style='width:200px;height: 200px;margin: 10px auto'></div>",
            buttons: [
                { text: "关闭", className: "default"},
            ],
        },function () {
            $("#qrCodeDialog").qrcode({
                render: "canvas", //也可以替换为table
                width: 200,
                height: 200,
                text: $("#reservationno").val()
            });

        });
    });

    function showVisitorPhoto(obj) {
        var $this = $(obj);
        $.modal({
            title: "访客照片",
            text: "<div id='photoImgDlg' style='width:200px;height: 200px;margin: 10px auto'></div>",
            buttons: [
                { text: "关闭", className: "default"},
            ],
        },function () {
            $("#photoImgDlg").html($this.html());
            $("#photoImgDlg img").attr("style","width:200px;height:200px;")

        });
    }

</script>
</body>
</html>